<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
	<HEAD>
		<META CONTENT="text/html; charset=UTF-8" HTTP-EQUIV="Content-Type">
		<TITLE>PI.JS > Getting Started to pi.js</TITLE>
		<LINK HREF="../../../inc/template.css" REL="stylesheet">
		<LINK HREF="../../../inc/template.css" REL="stylesheet">
		<SCRIPT SRC="../../../source/pi.1.1.1.js" TYPE="text/javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/template.js" TYPE="text/javascript"></SCRIPT>
		<LINK HREF="../../../inc/sh/SyntaxHighlighter.css" TYPE="text/css" REL="stylesheet">
		<SCRIPT SRC="../../../inc/sh/shCore.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushJScript.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushCss.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushXml.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushPhp.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushPython.js" LANGUAGE="javascript"></SCRIPT>
	</HEAD>
	<BODY>
		<A HREF="/" ID="header" CLASS="Header">
			<EM></EM>
		</A>
		<DIV CLASS="Index">
			<DIV ID="indexContainer" CLASS="ListContainer">
				<A HREF="../../../index.html" CLASS="Button "><EM>About Pi</EM></A>
				<A HREF="../../../pages/Downloads" CLASS="Button "><EM>Downloads</EM></A>
				<A HREF="../../../documentation/index.html" CLASS="Button SelectedButton"><EM>Documentation</EM></A>
				<DIV CLASS="SubNavigation">
					<DIV>
						<H2 CLASS="Title">Essential Documents</H2>
						<UL>
							<LI>
								<A STYLE="" HREF="../../../documentation/essential/Getting Started to pi.js/">Getting Started to pi.js</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/essential/Object Oriented Programming with pi.js/">Object Oriented Programming with pi.js</A>
							</LI>
						</UL>
					</DIV><DIV>
						<H2 CLASS="Title">Reference</H2>
						<UL>
							<LI>
								<A STYLE="" HREF="../../../documentation/env/pi.env/">pi.env</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/get/pi.get/">pi.get</A>
							</LI><LI>
								<A STYLE="font-weight:bold" HREF="../../../documentation/util/pi.util/">pi.util</A>
								<UL>
									<LI>
										<A HREF="../../../documentation/util/pi.util.Array/">pi.util.Array</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Element/">pi.util.Element</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Hash/">pi.util.Hash</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Number/">pi.util.Number</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.String/">pi.util.String</A>
									</LI>
								</UL>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/base/pi.base/">pi.base</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/element/pi.element/">pi.element</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/xhr/pi.xhr/">pi.xhr</A>
							</LI><LI>
								<SPAN STYLE="font-weight:bold">Native Objects</SPAN>
								<UL>
									<LI>
										<A HREF="../../../documentation/Native Objects/Array/">Array</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/Function/">Function</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/Number/">Number</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/String/">String</A>
									</LI>
								</UL>
							</LI><LI>
								<SPAN STYLE="font-weight:bold">Plugins</SPAN>
								<UL>
									<LI>
										<A HREF="../../../documentation/plugin/pi.comet/">pi.comet</A>
									</LI><LI>
										<SPAN>pi.cache</SPAN>
									</LI><LI>
										<SPAN>pi.layer</SPAN>
									</LI><LI>
										<A HREF="../../../documentation/plugin/pi.storage/">pi.storage</A>
									</LI><LI>
										<SPAN>pi.win</SPAN>
									</LI>
								</UL>
							</LI>
						</UL>
					</DIV>
				</DIV>
				<A HREF="../../../pages/Plugins" CLASS="Button "><EM>Plugins</EM></A>
				<A HREF="http://groups.google.com/group/pi-js" CLASS="Button"><EM>Developer Forum</EM></A>
				<A HREF="http://code.google.com/p/pi-js/issues/list" CLASS="Button"><EM>Issues</EM></A>
			</DIV>
		</DIV>
		<!-- <h3 class="ContentNav" id="contentTitle">
			<div>
				<a class="Sel">index.html</a>
			</div>
		</h3>-->
		<DIV ID="documentationContent" CLASS="Content">
			<DIV CLASS="Pad">
				<H1 CLASS="Name">Getting Started to pi.js<EM CLASS="DocumentationTitleVersion">2009-01-06 09:23:30</EM></H1>
				<DIV>
				<H2 CLASS="Title">Summary</H2>
				This tutorial helps  to begin with developing web based applications with pi.js.
				</DIV>
				<DIV CLASS="Text">
					Pi library utilizes development of web based applications and provides developers a comfortable development environment. I'll try to explain this with a simple calculator example.
We start by creating a function named "calculator";
<PRE NAME="code" CLASS="Js">
function calculator(){
	// ...
}

pi.util.Init.push(calculator);
</PRE>
pi.util.Init function keeps the functions that will run after the page is loaded completely as an array. We added calculator function to this array since we will generate the user interface after page loads. Now let's generate the interface with the help of pi.element.
<PRE NAME="code" CLASS="Js">
function calculator(){
	var main = new pi.element("div").addStyle({
		"width": "200px",
		"border": "1px solid red",
		"padding": "5px"
	}).insert(document.body);
	main.child.add(new pi.element("h1").addStyle({
		"font": "bold 14px sans-serif",
		"textAlign": "center"
	}).update("Calculator"));
	var input = new pi.element("input").insertAfter(new pi.element("label").update("Calculation:").insert(main));
	new pi.element("button").event.addListener("click", function(){
		input.update(eval(input.element.value))
	}).update("Evaluate").insert(main)
};
pi.util.Init.push(calculator);
</PRE>
In the example we created the element 'main' which will keep all other elements and assigned css style to the element. Afterwards we created the title of our calculator, calculation input and evaluate button.
You should see that we've used insertAfter method when we are creating the input element.By this method, we've created the input from behind a label.Finally, we have attached a function that evaluates calculation and prints result to the input, to the button we've created.You can see this example in the bottom of this page.
Curry is the most important tools of pi.js, it provides customizing scope and argument lists of functions.Let's solve a problem to mean it.How can we show a "hello alert" after waiting 5 seconds with javascript?
<PRE NAME="code" CLASS="Js">
setTimeout(function(){
	alert("Hello");
},5000);
</PRE>
In this solution, we've created a new function.But we can solve the problem by better way with curry method pi.js added into Function class.
<PRE NAME="code" CLASS="Js">
setTimeout(
	alert.curry(window,"Hello"), 5000
);
</PRE>
This time, we determine scope and argument list of the function will be executed by curry method.You can use pi.util.Curry instead of the curry method.
You can take a look at features of pi.js and other examples at the reference pages.
				</DIV>
				<DIV CLASS="Block">
					<H1>Examples</H1>
					<DIV CLASS="Example">
						<H1>Example #1: Simple Calculator Example</H1>
							<DIV CLASS="View">
								<DIV ID="calculator">
</DIV><SCRIPT SRC="calculator.js" TYPE="text/javascript"></SCRIPT>
							</DIV>
							<H2>Source files of the above example:</H2>
							<DIV>
								<H3>calculator.html</H3>
								<PRE NAME="code" CLASS="html">&lt;div id="calculator">
&lt;/div></PRE>
							</DIV><DIV>
								<H3>calculator.js</H3>
								<PRE NAME="code" CLASS="js">function calculator(){
	var main = new pi.element("div").addStyle({
		"width": "200px",
		"border": "1px solid red",
		"padding": "5px"
	}).insert(pi.get("calculator"));
	main.child.add(new pi.element("h1").addStyle({
		"font": "bold 14px sans-serif",
		"textAlign": "center"
	}).update("Calculator"));
	var content = new pi.element("div").insert(main);
	var input = new pi.element("input").update("( 600+900-(1500/3) )%3").insertAfter(new pi.element("label").update("Input:").insert(main));
	new pi.element("button").event.addListener("click", function(){
		input.update(eval(input.element.value))
	}).update("Evaluate").insert(main)
};
pi.util.Init.push(calculator);
</PRE>
							</DIV>
					</DIV>
				</DIV>
			</DIV>
		</DIV>
		<DIV CLASS="Clean"></DIV>
	</BODY> 
</HTML>